import React, {Component} from 'react'
import {DropdownContext, DropdownContextType} from './DropdownContext'
import PopoverWrapper from '../popover/PopoverWrapper'

interface DropdownMenuProps {
  className?: string
}

class DropdownMenu extends Component<DropdownMenuProps> {
  render(): React.ReactNode {
    const {children, className} = this.props
    return (
      <DropdownContext.Consumer>
        {(value: DropdownContextType | any): React.ReactNode => (
          <PopoverWrapper
            role={'menu'}
            isOpen={value.isOpen}
            toggle={value.toggle}
            target={value.id}
            trigger={'legacy'}
            placement={value.direction}
            className={'dropdown-menu ' + (className ? className : '')}
            children={children}
          />
        )}
      </DropdownContext.Consumer>
    )
  }
}

export {DropdownMenu}
